<template>
    <el-container id="home-container">
        <!-- 头部区域 -->
        <el-header id="home-header">
            <span>代码质量量化评估系统</span>
            <div class="user-info">
                <span class="head-account">
                    <el-avatar  :size="40" style="margin-right:10px;color:cornflowerblue;" icon="Avatar" />
                    {{ account }}，欢迎您！
                </span>
                <el-button type="info" icon="SwitchButton" circle @click="logout"></el-button>
            </div>
        </el-header>
        <el-container>
            <!-- 侧边栏 -->
            <el-aside id="home-aside" width="170px">
                <!-- 侧边栏菜单区域 -->
                <el-menu :default-active="currentPath" active-text-color="#ffd04b" background-color="#545c64"
                    text-color="#fff" :router="true">
                    <!-- 一级菜单 -->
                    <el-sub-menu index="1">
                        <!-- 一级菜单模板区域 -->
                        <template #title>
                            <el-icon>
                                <Menu />
                            </el-icon>
                            <span>用户管理</span>
                        </template>
                        <!-- 二级菜单 -->
                        <el-menu-item index="/home/modifyPassword">
                            <!-- 二级菜单模板区域 -->
                            <template #title>
                                <span>修改密码</span>
                            </template>
                        </el-menu-item>
                    </el-sub-menu>
                     <!-- 一级菜单 -->
                     <el-sub-menu index="2">
                        <!-- 一级菜单模板区域 -->
                        <template #title>
                            <el-icon>
                                <Menu />
                            </el-icon>
                            <span>项目管理</span>
                        </template>
                        <!-- 二级菜单 -->
                        <el-menu-item index="/home/projectList">
                            <!-- 二级菜单模板区域 -->
                            <template #title>
                                <span>项目列表</span>
                            </template>
                        </el-menu-item>
                        <el-menu-item index="/home/projectAdd">
                            <!-- 二级菜单模板区域 -->
                            <template #title>
                                <span>添加项目</span>
                            </template>
                        </el-menu-item>
                    </el-sub-menu>
                </el-menu>
            </el-aside>
            <!-- 右侧内容主体 -->
            <el-main id="home-main">
                <!-- 路由占位符 -->
                <router-view></router-view>
            </el-main>
        </el-container>
    </el-container>
</template>

<script>
import { useRouter, useRoute } from "vue-router";
import { reactive, computed, toRefs, ref } from "vue";
import { ElMessage, ElMessageBox } from 'element-plus'
export default {
    name: "home",
    components: {},
    props: {},
    setup() {
        const { path } = useRoute();
        const router = useRouter()
        
        const account = localStorage.getItem("account")
        console.log(account)
        //const account = getaccount.slice(1,2)
        //console.log(account)
        const logout = () => {
            ElMessageBox.confirm(
                '确定退出系统吗?',
                'Warning',
                {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                },

            )
                .then(() => {
                    window.sessionStorage.clear()
                    window.localStorage.clear()
                    router.push('/login')
                    ElMessage({
                        type: 'success',
                        message: '退出系统',
                    })
                })
                .catch(() => {
                })

        }
        /**
         * 获取当前路由路径
         */
        const currentPath = computed(() => path);
        return {
            logout,
            currentPath,
            account,
        }
    }
}
</script>

<style scoped>
.head-account {
    margin-right: 30px;
}

.user-info {
    float: right;
    display: flex;
    align-items: center;
    font-weight: 100;
}

#home-container {
    height: 100vh;
}

#home-header {
    background-color: #363d40;
    display: flex;
    justify-content: space-between;
    padding-left: 20;
    align-items: center;
    color: #fff;
    font-weight: bold;
    font-size: 25px;
}

#home-aside {
    background-color: #333744;
}

#home-main {
    background-color: beige;
}
</style>
<style>
/* 导航菜单高亮 */
.is-active {
    background-color: rgb(108 190 254 / 20%) !important;
}

.is-opened {
    background-color: rgba(27, 63, 135, 0.64) !important;
}
</style>